<template>
  <div class="left-bottom-box">
    <div class="left-bottom-box-header">
      <span class="title">服务订单情况</span>
      <span class="number">\02</span>
    </div>
    <div class="left-bottom-box-table">
      <ScrollTable :columns="columns" :dataSource="data">
        <template #serviceCase="{ row }">
          <span>{{ row.serviceCase === 1 ? '上门按摩' : '上门洗脚' }}</span>
        </template>
        <template #status="{ row }">
          {{ row.status === 1 ? '已预定' : '未预定' }}
        </template>
      </ScrollTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { columns, data } from './config'

import ScrollTable from './Table.vue'

defineOptions({
  name: 'LB'
})
</script>

<style scoped lang="scss">
.left-bottom-box {
  width: 100%;
  min-height: 600px;
  background: url('@/assets/kanban/bg/scroll-table.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;

  &-header {
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    .title,
    .number {
      font-size: 0.2rem;
      font-weight: 600;
    }
    .title {
      color: #69defa;
    }
    .number {
      color: #7bb9ff;
      font-size: 0.3rem;
    }
  }
  &-table {
    margin-top: 26px;
  }
}
</style>
